<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="js-82.css">
	<style type="text/css">
	    #messages{
			border: 1px solid #ddd;
			margin: 50px auto;
			width: 600px;
			height: auto;
			overflow: hidden;
			padding: 10px;
	    }

		#messages ul{
			border: 0px solid #ddd;
			margin: 10px auto;
			width: 100%;
		}

		#messages ul li{
			font-size: 14px;
			border-bottom: 1px dashed #ddd;
			padding:5px 0;
			filter: alpha(opacity: 0);
			opacity: 0;
		}

        #txt1{
        	width: 100%;
        	height: 100px;
        }
		#btn1{
			display: block;
			width: 100%;
			padding: 5px;

		}
	</style>
	<script type="text/javascript" src="move3.js"></script>
    <script type="text/javascript">
    	window.onload=function(){
    		var btn1=document.getElementById('btn1');
            var ul=document.getElementById('ul');
            var txt1=document.getElementById('txt1');  
            
            btn1.onclick=function(){
            	var li=document.createElement('li');
            	li.innerHTML=txt1.value;
            	txt1.value='';

            	//ul.appendChild(li);
            	if (ul.children.length>0) {
            		ul.insertBefore(li,ul.children[0]);
            	}else{
            		ul.appendChild(li);
            	}
            	
            	//运动
            	//设置一个自适应的高度
                var iHeight = li.offsetHeight;
                //alert(iHeight);
                li.style.height='0';
                //startMove(li,{height:iHeight,opacity:100});
                startMove(li,{height:iHeight},function(){
                	startMove(li,{opacity:100})
                });
            }


    	}
    </script>
</head>
<body>
 <div id="messages">
	<textarea id="txt1" ></textarea>
	<input type="button" id="btn1" value="发布">
	<ul id="ul">
		
	</ul>
 </div>
</body>
</html>